<template>
    <div class="demo-classicPage-postList" >
        <div class="author-demo">
            <div>作者：信姜缘</div>
            <div>座位号C-5-02</div>
        </div>

        <Table id="postListTable" :stripe="true" :columns="postColumns" :data="postData" :height="tableHeight" >

        </Table>


        <h2 style="margin-top: 40px">HTML代码</h2>
        <pre style="background-color: #ececec;">
            <code class="html" v-text="htmlCode">
            </code>
        </pre>
        <h2>Js代码</h2>
        <pre style="background-color: #ececec;">
            <code class="html" v-text="jsCode">
            </code>
        </pre>


    </div>
</template>
<script>
    import hljs from 'highlight.js'
    export default {
        data () {
            return {

                jsCode:'export default {\n' +
                '  data () {\n' +
                '    return {\n' +
                '      postColumns: [\n' +
                '        { title: \'序列号\', type: \'index\', width: 80, align: \'center\' },\n' +
                '        { title: \'岗位名称\', key: \'postName\', width: 200 },\n' +
                '        { title: \'岗位描述\', key: \'postDesc\', ellipsis: \'true\' },\n' +
                '        { title: \' \', width: 120, align: \'left\', key: \'options\', render: (h, op) => {\n' +
                '            var that = this\n' +
                '            return (\n' +
                '                <div style="display: none">\n' +
                '                    <i type="primary" size="small" class="iconfont icon-edit" style="margin-right:8px"  onClick={that.editClick.bind(event,op)}></i>\n' +
                '                    <i type="primary" size="small" class="iconfont icon-trash" style="margin-right:8px"  onClick={that.trashClick.bind(event,op)}></i>\n' +
                '                    <i type="primary" size="small" class="iconfont icon-details" style="margin-right:8px"  onClick={that.detailsClick.bind(event,op)}></i>\n' +
                '                </div>\n' +
                '            )\n' +
                '          }\n' +
                '        }\n' +
                '      ],\n' +
                '      postData: [{postName: \'java工程师\', postDesc: \'这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊\'},\n' +
                '          {postName: \'java工程师\', postDesc: \'这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊\'},\n' +
                '          {postName: \'java工程师\', postDesc: \'这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊\'}],\n' +
                '      tableHeight: 500\n' +
                '    }\n' +
                '  },\n' +
                '  methods: {\n' +
                '    editClick ( data, event) {\n' +
                '        console.info(\'编辑按钮被点击，参数如下\')\n' +
                '        console.info(data)\n' +
                '        console.info(event)\n' +
                '    },\n' +
                '    trashClick ( data, event) {\n' +
                '      console.info(\'删除按钮被点击，参数如下\')\n' +
                '      console.info(data)\n' +
                '      console.info(event)\n' +
                '    },\n' +
                '    detailsClick ( data, event) {\n' +
                '      console.info(\'详情按钮被点击，参数如下\')\n' +
                '      console.info(data)\n' +
                '      console.info(event)\n' +
                '    }\n' +
                '  },\n' +
                '  mounted () {\n' +
                '      var div = document.getElementById(\'postListTable\')\n' +
                '      var trs = div.getElementsByClassName(\'ivu-table-row\')\n' +
                '      for (var i = 0; i < trs.length; i++) {\n' +
                '          trs[i].onmouseenter = function () {\n' +
                '              this.lastChild.firstChild.lastChild.style.display = \'inline\'\n' +
                '          }\n' +
                '          trs[i].onmouseleave = function () {\n' +
                '              this.lastChild.firstChild.lastChild.style.display = \'none\'\n' +
                '          }\n' +
                '      }\n' +
                '  }\n' +
                '}',
                htmlCode:
                '<div class="demo-classicPage-postList" >\n' +
                '      <Table id="postListTable" :stripe="true" :columns="postColumns" :data="postData" :height="tableHeight" >\n' +
                '      </Table>\n' +
                '</div>',
                postColumns: [
                    { title: '序列号', type: 'index', width: 80, align: 'center' },
                    { title: '岗位名称', key: 'postName', width: 200 },
                    { title: '岗位描述', key: 'postDesc', ellipsis: 'true' },
                    { title: ' ', width: 120, align: 'left', key: 'options', render: (h, op) => {
                        var that = this
                        return (
                            <div style="display: none">
                            <i type="primary" size="small" class="iconfont icon-edit" style="margin-right:8px"  onClick={that.editClick.bind(event,op)}></i>
                        <i type="primary" size="small" class="iconfont icon-trash" style="margin-right:8px"  onClick={that.trashClick.bind(event,op)}></i>
                        <i type="primary" size="small" class="iconfont icon-details" style="margin-right:8px"  onClick={that.detailsClick.bind(event,op)}></i>
                        </div>
                    )
                    }
                    }
                ],
                postData: [{postName: 'java工程师', postDesc: '这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊'},
                    {postName: 'java工程师', postDesc: '这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊'},
                    {postName: 'java工程师', postDesc: '这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊这是一个很吊很吊很吊'}],
                tableHeight: 500
            }
        },
        methods: {
            editClick ( data, event) {
                console.info('编辑按钮被点击，参数如下')
                console.info(data)
                console.info(event)
            },
            trashClick ( data, event) {
                console.info('删除按钮被点击，参数如下')
                console.info(data)
                console.info(event)
            },
            detailsClick ( data, event) {
                console.info('详情按钮被点击，参数如下')
                console.info(data)
                console.info(event)
            }
        },
        mounted () {
            var div = document.getElementById('postListTable')
            var trs = div.getElementsByClassName('ivu-table-row')
            for (var i = 0; i < trs.length; i++) {
                trs[i].onmouseenter = function () {
                    this.lastChild.firstChild.lastChild.style.display = 'inline'
                }
                trs[i].onmouseleave = function () {
                    this.lastChild.firstChild.lastChild.style.display = 'none'
                }
            }
            window.setTimeout(function () {
                $('.demo-classicPage-postList pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 0);

        }
    }
</script>

